<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap-4.5.0/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/home.css"/>
		<link rel="stylesheet" type="text/css" href="css/about.css"/>
		<link rel="stylesheet" type="text/css" href="css/services.css"/>
		<link rel="stylesheet" type="text/css" href="css/gallery.css"/>
		<link rel="stylesheet" type="text/css" href="css/shop.css"/>
		<link rel="stylesheet" type="text/css" href="css/contact.css"/>
		<link rel="stylesheet" type="text/css" href="css/blog.css"/>
		<link rel="stylesheet"type="text/css"href="css/shopsingle.css" />
		
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
		<script src="bootstrap-4.5.0/dist/js/bootstrap.bundle.js" type="text/javascript" charset="UTF-8"></script>
		<script src="bootstrap-4.5.0/dist/js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/popper.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 
	</head>
	<body>
	<!--头-->
			
			<div class="container d-flex flex-column flex-md-row justify-content-between">
				<!--左-->
				<ul class="list-unstyled d-flex mb-0 py-3 mx-auto mx-md-0">
					<li>
						<i class="fa fa-user mr-2"></i>
						<span class="text-secondary">login</span>
					</li>
					<li class="mx-3">
						<i class="fa fa-pencil mr-2"></i>
						<span class="text-secondary">Register</span>
					</li>
					<li >
						<i class="fa fa-cart-plus mr-2"></i>
						<span class="text-secondary">Checkout</span>
					</li>
				</ul>
				<!--右-->
				<ol class="list-unstyled d-flex mb-0 py-3 mx-auto mx-md-0">
					<li class="mx-3">
						<i class="fa fa-heart mr-2"></i>
						<span class="text-secondary">Wishlist</span>
					</li>
					<li>
						<i class="fa fa-angle-down mr-2"></i>
						<span class="text-secondary">USD</span>
					</li>
				</ol>
			</div>
			<!--搜索框-->
			<div class="container-fluid " style="background-image: url(img/header_bg.jpg);">
				<div class="row py-5 d-flex ">
					<div class="col-md-6 col-12 text-center">
					<img src="img/logo.png" />
					</div>
					<div class="col-md-6 col-12 text-center">
					<div class="btn-group">
						<input type="text " placeholder="Search..." class="border-0" />
						<button class="btn fa fa-search  btn-outline-danger banner" style="background-color: #fc5a6d;"></button>
					</div>
					</div>
				</div>
			</div>
	
			
			<!--导航栏-->
			<div class="navbar navbar-expand-md  p-0 " style="background-color: #fc5a6d;">
		<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#menu">
				   <i class="fa fa-bars "style="color: white;"></i>
				   </button>
		<div class="collapse navbar-collapse justify-content-center" id="menu">
			<ul class="navbar-nav text-capitalize">
				<li class="nav-item ">
					<a href="home.html" class="nav-link ">home</a>
				</li>
				<li class="nav-item">
					<a href="about.html" class="nav-link">about</a>
				</li>
				<li class="nav-item">
					<a href="services.html" class="nav-link">services</a>
				</li>
				<li class="nav-item">
					<a href="gallery.html" class="nav-link">gallery</a>
				</li>
				<li class="nav-item">
					<a href="blog.html" class="nav-link ">blog</a>
				</li>
				<li class="nav-item">
					<a href="shop.html" class="nav-link default">shop</a>
				</li>
				<li class="nav-item">
					<a href="contact.html" class="nav-link ">contact</a>
				</li>
			</ul>
		</div>
		
	</div>
	
			
			
			<!--blog标题-->
			
			
					
					<div class="text-center m-0 p-0" style="width: 100%;color: #FC5A6D;background-image: url(img/choose_bg.jpg);">
							   <div class="pb-5">
								   
							        <p class="display-4 font-weight-bold py-5">Shop Single</p>
							        <p>————————————————</p>
							        <p style="margin-top: -30px;">——————————</p>
									<span align="center">Home<span class="text-dark">/Shop Single</span></span>
					
								</div>
					</div>	
		<!-- Shop Single中部 -->
	
		<!-- 最外div -->
		<div class="  d-flex flex-md-row flex-column py-5 mt-5 mx-auto"style="width: 80%;">
		<!-- 左边 -->
		<div class=" col-lg-9 row">
			<!-- 女图片 -->
			
				
			
			<div class="col-lg-5">
				<img src="img/shop_product.jpg"class="w-100 h-100"/>
			</div>
				<div class="col-lg-7 ">
					<h4 class="font-weight-bold">Hand Made Jewellery</h4>
					<h4 style="color: darkgrey;">$20.00</h4>
					<div style="color: gold;">
						<span class="fa fa-star"></span>
						<span class="fa fa-star"></span>
						<span class="fa fa-star"></span>
						<span class="fa fa-star"></span>
						<span class="fa fa-star"></span>
					</div>
					<p>
						These activities werw called craftrs because originally many of them were professions under the guild
						system.Adolescents were apprenticed to a master craftsman,and refined their skills over a period of
						years in exchange for low wages.By the time their reaininh was complete,they were well equipped to set
						up in trade for themselves,earning their living with the skill that could be traded directly within the
						community,often for goods and services.
					</p>
					<!-- 按钮 -->
					<div class="col-md-12" id="dd">
						<button v-on:click="num=num-1" style="background-color: white;width: 50px;height: 40px;"><b>-</b></button>
							<span>{{num}}</span>
						<button v-on:click="num=num+1" style="background-color: white;width: 50px;height: 40px;"><b>+</b></button>
						<a href="#" class="py-2 px-4 " style="background-color: #FC5A6D;color: white;display: inline-block;height: 40px;margin-top: 0px;"><span>ADD TO CART</span></a>
						<button type="button"class="border-0" style="background-color: #000000;"><i class="fa fa-heart-o py-2 px-2"style="color: white;"></i></button>
					</div>
					<div class="mt-3">
						<p>Categories:<span style="color: #FC5A6D;">Knitted hats,Tank tops</span></p>
					</div>
				</div>
			
			<!-- 选项卡 -->
			<div class="col-12 p-0 my-5">
				
			
			<ul class="nav nav-tabs">
						<li class="nav-item">
							<a href="#one" class="nav-link active" data-toggle="tab"style="color: #FC5A6D;"><b >Description</b></a>
						</li>
						<li class="nav-item">
							<a href="#two" class="nav-link" data-toggle="tab"style="color: black;"><b>Reviews(1)</b></a>
						</li>
						
			
					</ul>
					<div class="tab-content text-center">
						<div class="tab-pane active " id="one">
							
							<p class="w-100">On the other hand,we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the
							charms of pleasure of the moment,so blinded by desire,that they cannot foresee the pain and trouble that are bound to ensue;
							and equal blame belongs to those who fail in their duty through weakness of will,which is the same as saying through shrinking
							from toil and pain.These cases are perfectly simple and easy to distinguish.</p>
						</div>
						<div class="tab-pane " id="two">
						
							<p class="w-100">On the other hand,we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the
							charms of pleasure of the moment,so blinded by desire,that they cannot foresee the pain and trouble that are bound to ensue;
							and equal blame belongs to those who fail in their duty through weakness of will,which is the same as saying through shrinking
							from toil and pain.These cases are perfectly simple and easy to distinguish.</p>
						</div>
						
					</div>
			</div>
			<!-- Related Products -->
			<!-- <div class="mt-3">
				<b class="font-weight-bold"><span style="color: #FC5A6D;">Related</span>Products</b>
			</div> -->
			<div class="py-4">
				<b style="color: #FC5A6D;">Related <span style="color: black;">Products</span></b><br>
				
			</div>
			<div class="container d-flex flex-row flex-wrap text-center big p-0 gogo">
			<!-- 1 -->
			<div style="background-color: #FC5A6D;"class="my-3 mr-5 g">
					
				<div class="big">
					<a href=""><img src="img/pro1.jpg"style="width: 300px;" class="p "/></a>
				</div>
				
				<div class="py-3"style="color:white;">
					<b style="font-size: 25px;">Showcase Elephant</b>
				</div>
				<div style="color: yellow;">
					<span class="fa fa-star"></span>
					<span class="fa fa-star"></span>
					<span class="fa fa-star"></span>
					<span class="fa fa-star"></span>
					<span class="fa fa-star"></span>
				</div>
				<div class="text-center mb-3 text-white pt-3">
					<p>lorem lpsum has been the <br/>
						industry's standard dummy text<br />
						ever since the 1500s
					</p>
				</div>
			</div>
			
			<!--2-->
				<div style="background-color: #FC5A6D;"class="my-3 mr-5 g">
					
				
				<div class="big">
					<a href=""><img src="img/pro2.jpg"style="width: 300px;" class="p "/></a>
				</div>
				
				<div class="py-3"style="color:white;">
					<b style="font-size: 25px;">Showcase</b>
				</div>
				<div style="color: yellow;">
					<span class="fa fa-star"></span>
					<span class="fa fa-star"></span>
					<span class="fa fa-star"></span>
					<span class="fa fa-star"></span>
					<span class="fa fa-star"></span>
				</div>
				<div class="text-center mb-3 text-white pt-3">
					<p>lorem lpsum has been the <br/>
						industry's standard dummy text<br />
						ever since the 1500s
					</p>
				</div>
			</div>
			<!--3-->
				<div style="background-color: #FC5A6D;"class="my-3 g">
					
				
				<div class="big">
					<a href=""><img src="img/pro3.jpg"style="width: 300px;" class="p "/></a>
				</div>
				
				<div class="py-3"style="color:white;">
					<b style="font-size: 25px;">Ladies Purse</b>
				</div>
				<div style="color: yellow;">
					<span class="fa fa-star"></span>
					<span class="fa fa-star"></span>
					<span class="fa fa-star"></span>
					<span class="fa fa-star"></span>
					<span class="fa fa-star"></span>
				</div>
				<div class="text-center mb-3 text-white pt-3">
					<p>lorem lpsum has been the <br/>
						industry's standard dummy text<br />
						ever since the 1500s
					</p>
				</div>
			</div>
			</div>
		</div>
		<!-- 右边 -->
		<div class="col-md-3">
			<!-- 搜索框 -->
		<div class="form-control search mx-auto mx-md-0 p-0 align-self-center">
			<form class="d-flex h-100">
				<input type="text" placeholder="Search" class="border-0 w-75" />
				<button class="btn d-inline-block py-1 px-3 pl-5 ">
				<span class="fa fa-search "></span>
				</button>
			</form>
		</div>		
			<!-- PRODUCT CATEGORIES -->
			<div class="py-4">
				<b> PRODUCT CATEGORIES</b><br>
				<b class="b">————</b>
			</div>
			
			<!--  BLOG CATEGORIES下的列表 -->
			<div>
				<table class='table'>
					<tr>
						<td>Funky Jewelry
						<span class=' fs float-right ' >10</span>
						</td>
					</tr>
						<tr>
						<td>Knitted Hats
						<span class=' fs float-right' >35</span>
						</td>
					</tr>
					<tr>
						<td> Homemade Soap
						<span class=' fs float-right' >40</span>
						</td>
					</tr>
						<tr>
						<td>Birthday Cards
						<span class=' fs float-right' >10</span>
						</td>
					</tr>
						<tr>
						<td>Tank Tops
						<span class=' fs float-right' >8</span>
						</td>
					</tr>
				</table>
			</div>
			<!-- PRODUCT tags -->
			<div class="py-4">
				<b>PRODUCT TAGS</b><br>
				<b class="b">————</b>
			</div>
			
			<div class="col-12 row p-0">
				<div class="col-12">
					<button class="border-0 my-1 py-1 px-3 text-white"style="background-color: #FC5A6D;font-size: 15px;">Craft</button>
					<button class="border-0 my-1 py-1 px-3 text-white"style="background-color: #FC5A6D;font-size: 15px;">Decoration</button>
					<button class="border-0 my-1 py-1 px-3 text-white mr-lg-5"style="background-color: #FC5A6D;font-size: 15px;">Diy</button>
					<button class="border-0 my-1 py-1 px-3 text-white"style="background-color: #FC5A6D;font-size: 15px;">Faashion</button>
					<button class="border-0 my-1 py-1 px-3 text-white mr-5"style="background-color: #FC5A6D;font-size: 15px;">Lifestyle</button>
					<button class="border-0 my-1 py-1 px-4 text-white"style="background-color: #FC5A6D;font-size: 15px;">General</button>
				</div>
			</div>
			
			
			
		</div>
		</div>
		<!--Our Clients-->
			
			<div class="pink">
					<h2 class="text-white text-center py-3 " >Our Cliebts</h2>
					<div class="container">
						<div class="row pb-5">
							<div class="col-sm-12 text-center px-4">
								<img src="img/partner1.png" class="px-4 d-none d-xl-inline-block " />
							
								<img src="img/partner2.png" class="px-4 d-none  d-xl-inline-block" />
							
								<img src="img/partner3.png" class="px-4" />
							
								<img src="img/partner4.png" class="px-4 d-none  d-xl-inline-block" />
							
								<img src="img/partner5.png" class="px-4 d-none  d-xl-inline-block" />
							</div>
						</div>
					</div>
				</div>
			
			
			<!--底  黑色部分-->
				<div class="container-fluid  py-3 " style="background-color: #000000;">
			<div class="container">
				<div class="row">
					<div class="col-sm-6 col-md-6 col-lg-4">
						<div class="item">
							<img src="img/logo.png" class="mt-4" />
							<p class="text-white mt-1">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
		
						</div>
					</div>
					<div class="col-lg-2 col-md-3 col-sm-3">
						<div class="item">
							<div class="footer-title text- py-3 font-weight-bold" style="font-size: 30px;color: #fc5a6d;">Help</div>
							<div class="row">
								<div class="col-md-3">
									<ul class="list">
										<li>
											<a href="#" class="text-white">Find&nbsp;Your&nbsp;Beer</a>
										</li>
										<li>
											<a href="#" class="text-white">Customer&nbsp;Service</a>
										</li>
										<li>
											<a href="#" class="text-white">Contact</a>
										</li>
										<li>
											<a href="#" class="text-white">Recent&nbsp;Orders</a>
										</li>
									</ul>
								</div>
		
							</div>
						</div>
					</div>
					<div class="col-lg-2 col-md-3 col-sm-3">
						<div class="item">
							<div class="footer-title text- py-3 font-weight-bold" style="font-size: 30px;color: #fc5a6d;">Link</div>
							<div class="row">
								<div class="col-md-3">
									<ul class="list">
										<li>
											<a href="#" class="text-white">Home</a>
										</li>
										<li>
											<a href="#" class="text-white">Shop</a>
										</li>
										<li>
											<a href="#" class="text-white">404 Page</a>
										</li>
										<li>
											<a href="#" class="text-white">Login</a>
										</li>
									</ul>
								</div>
		
							</div>
						</div>
					</div>
					<div class="col-sm-6 col-md-6 col-lg-4">
						<div class="footer-item">
							<div class="footer-title  py-3 font-weight-bold" style="font-size: 30px; color: #fc5a6d;">
								Our Information
							</div>
							<span class="fa fa-map-marker  mr-2 mt-2" style="float: left;color: #fc5a6d;"></span>
							<p class="text-white">787 Lakeview St. Marion, NC 28752 </p>
							<span class="fa fa-phone  mr-2 mt-2" style="float: left;color: #fc5a6d;"></span>
							<p class="text-white">+1800123654789 <br />&nbsp;&nbsp;&nbsp;&nbsp; +1800123456788 </p>
							<span class="fa fa-envelope  mr-2 mt-2" style="float: left;color: #fc5a6d;"></span>
							<p class="text-white">Support@Handmade.Net </p>
						</div>
					</div>
				</div>
			</div>
		
		</div>
				
				
				<!--最后一行-->
				<div class="container-fluid text-center">
			<div class="row" style="background-color: #fc5a6d;">
				<div class="mx-auto col-lg-6">
					<p class="mt-3  text-white">Copyrights © 2018 All Rights
						<a href="#" class="text-muted">Reserved</a> by Himanshusofttech</p>
				</div>
				<div class="mt-3  col-lg-6 mx-auto justify-content-md-center">
					<i class="fa fa-facebook  px-1 bai"></i>
					<i class="fa fa-twitter  px-1 bai"></i>
					<i class="fa fa-google-plus  px-1 bai"></i>
					<i class="fa fa-linkedin  px-1 bai"></i>
					<i class="fa fa-pinterest-p  px-1 bai"></i>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
				var dd= new Vue({
					el:'#dd',
					data:{
						num : 0,
					},
					
				});
		</script>
	</script>
</html>